<!--退款订单管理-->
<template>
  <div id="businessRefundOrder">
    <van-dropdown-menu>
      <van-dropdown-item v-model="listQuery.refundStatus" :options="refundStatus" />
      <van-dropdown-item v-model="listQuery.sort" :options="sortOption" />
    </van-dropdown-menu>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" :title="item.id">
          <template>
            <span v-if="item.realRefundTotal" class="color-danger">￥{{ item.realRefundTotal }}</span>
          </template>
          <template slot="label">
            <van-tag type="danger" style="margin-right:5px">{{ item.channelPayWay }}</van-tag>
            {{ item.refundFinishTime | formatDate('yyyy-MM-dd hh:mm:ss') }}
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      refundStatus: [
        { text: '全部', value: '' },
        { text: '退款成功', value: '1' },
        { text: '处理中', value: '2' },
        { text: '退款关闭', value: '3' },
        { text: '退款异常', value: '4' },
        { text: '退款失败', value: '5' }
      ],
      sortOption: [
        { text: '默认排序', value: '-gmtCreated' },
        { text: '退款时间排序', value: '-refundFinishTime' }

      ],
      list: [],
      pages: 1,
      listQuery: {
        page: 1,
        limit: 20,
        refundStatus: '1',
        sort: '-gmtCreated'
      },
      recordShow: false,
      refundJSON: {}

    }
  },
  watch: {
    'listQuery.refundStatus': function(val) {
      this.onRefresh()
    },
    'listQuery.sort': function(val) {
      this.onRefresh()
    }
  },
  created() {
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      this.listQuery = {
        ...this.listQuery,
        isTrade: true
      }
      this.$store.dispatch('businessRefundOrderPage', this.listQuery).then(response => {
        if (response.total === 0) {
          this.list = []
          this.refreshing = false
          this.finished = true
          return
        }
        this.list = [...this.list, ...response.records]
        this.pages = response.pages
        if (this.listQuery.page === this.pages) {
          this.finished = true
        } else {
          this.loading = false
          this.listQuery = {
            ...this.listQuery,
            page: this.listQuery.page + 1
          }
        }
      })
    },
    onRefresh() {
      this.finished = false
      this.loading = true
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.list = []
      this.onLoad()
    },
    handleReconciliation(row) {
      this.$store.dispatch('refundReconciliation', row.id).then(res => {
        this.msgSuccess('对账成功')
        this.recordShow = true
        this.refundJSON = res
        this.fetchData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
